<template>
  <div class="usermanual">
    <div style="height: 88px;"></div>
    <Header></Header>
    <div class="usermanual-box">
      <p class="title">{{ $t('assemble.用户手册') }}</p>
      <div class="dataList">
        <div class="dataList-header">
          <div>{{ $t('assemble.手册名称') }}</div>
          <div>{{ $t('assemble.操作') }}</div>
        </div>
        <div class="dataList-content">
          <div class="content-box" v-for="(item, index) in tableData" :key="item.id">
            <div class="content-left">
              <img :src="item.imgsrc">
              <p>{{ item.filename }}</p>
            </div>
            <div style="color: #E00000; cursor: pointer;" @click="loadFile(item.url)">
              {{ $t('assemble.下载手册') }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 254px;"></div>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from '@/components/header/index.vue'
import Footer from '@/components/footer/index.vue';
import{getuserhandbook} from "../../utils/api"
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      tableData: [
        
      ]
    }
  },
  mounted(){
    this.getuserhandbook()
  },
  methods: {
    handleClick(val) { },
   async getuserhandbook(){
       let res = await getuserhandbook()
       if(res.code ==1){
        console.log("用户手册",res)
        this.tableData = res.data
        this.tableData.forEach((item,index)=>{
          item.imgsrc = `https://demo163.1p5.net/jVQdZLgDMK.php/ajax/icon?suffix=${item.imagetype}`
        })
       }
       if(res.code ==401){
        this.$router.push({ path: '/login' })
      }
    },

    //下载手册
    loadFile(url){
      console.log("文件路径",url)
      window.open(url)
    },

  }
}
</script>
<style scoped lang="scss">
.usermanual {
  display: flex;
  flex-direction: column;
  align-items: center;

  .usermanual-box {
    width: 1200px;
    overflow-y: auto;
    font-size: 15px;

    .title {
      font-size: 15px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 23px;
      width: 100%;
      text-align: center;
    }

    .dataList {
      .dataList-header {
        width: 1200px;
        height: 57px;
        background: #EDEDED;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        padding: 20px 100px;
        box-sizing: border-box;
        font-size: 15px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 23px;
        display: flex;
        justify-content: space-between;
      }

      .content-box {
        width: 100%;
        height: 150px;
        padding: 50px 85px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #EDEDED;

        .content-left {
          box-sizing: border-box;
          display: flex;
          align-items: center;

          img {
            width: 50px;
            height: 50px;
            margin-right: 10px;
          }
        }

      }
    }
  }
}
</style>